import React from "react";
import { Switch, Modal, NavBar, Icon, Button, List } from 'antd-mobile';
import './style.less'
import { observer, inject } from 'mobx-react'
const dayjs = require('dayjs')

const Item = List.Item;
const Brief = Item.Brief;
const alert = Modal.alert;

@inject("chatbot", "application")
@observer
class Settings extends React.Component {


  static defaultProps = {
    //设置props默认值方法

  };

  state = {
    isShowConsole: true
  };

  componentDidMount() {

  }

  render() {
    const { isShowConsole } = this.state
    const { history, application } = this.props
    const { info } = application

    return (
      <div className="settings">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            history.go(-1)
          }}
        >{'设置'}</NavBar>
        <div className="info">
          <List renderHeader={() => '机器人'} className="base-list">
            <Item extra={info.name}>
              应用名称
            </Item>
            <Item extra={info.id}>
              应用ID
            </Item>
            <Item extra={info.id !== 'Not Found' ? info.enterpriseId : ''}>
              所属用户ID
            </Item>

            <Item extra={info.id !== 'Not Found' ? info.extraInfo["归属省份"] : ''}>
              地址
            </Item>
            <Item extra={info.id !== 'Not Found' ? info.description : ''}>
              描述
            </Item>
            <Item extra={info.id !== 'Not Found' ? dayjs(info.createTime).format("YYYY-MM-DD HH:mm:ss") : ''}>
              创建时间
            </Item>
          </List>

          <List renderHeader={() => '模拟器'} className="base-list">
            <Item onClick={() => { }} extra={
              <Switch
                checked={isShowConsole}
                onChange={() => {
                  this.setState({
                    isShowConsole: !isShowConsole,
                  }, () => {
                    if (!isShowConsole) {
                      window.vConsole.showSwitch()
                    } else {
                      window.vConsole.hideSwitch()
                    }
                  });
                }}
              />
            }>
              调试工具
            </Item>
          </List>

          <div className="clear">
            {info.chatbotId !== 'Not Found' ?
              <Button className="am-button-borderfix" size="small" onClick={() =>
                alert('注意', '数据不可恢复，确定清空吗？', [
                  { text: '取消', onPress: () => console.log('cancel') },
                  { text: '确定', onPress: () => {
                    localStorage.removeItem(`${info.id}-${process.env.REACT_APP_LOCALSTORAGE_HISTORYLIST_NAME}`)
                  } },
                ])
              } type="primary">清空聊天记录</Button>
              : null}

          </div>
        </div>

      </div>
    );
  }
}

export default Settings